<template>
  <div>
    <section id="WhyUs" class="custom-padding animate__animated bg-light" data-animation="animate__fadeInUp">
      <div class="container">
        <div class="mb-5 animate__animated" data-animation="animate__fadeInDown">
          <p class="lead text-muted">为什么要选择APS高级排产排产系统</p>
          <h2 class="section-title">携手我们开启创新征程，<br/>畅享前沿 IT 技术与专业解决方案。</h2>
          <p>
            从契合业务流程的定制软件，到灵活可靠的云服务，<br/>
            我们为初创企业与成熟企业定制专属方案，保障系统的可扩展性、安全性，全面提升运营效率 。</p>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <div class="row">
              <div class="col-lg-6 col-md-6 mb-4">
                <div class="card h-100 animate__animated bg-transparent" data-animation="animate__fadeInUp">
                  <div class="card-body">
                    <div class="icon mb-3">
                      <i class="fas fa-code fa-3x text-dark"></i>
                    </div>
                    <h5 class="card-title">自定义软件开发</h5>
                    <p class="card-text">我们凭借专业能力，深度剖析您的业务需求，构建完全量身定制的软件解决方案。
                      旨在全面增强业务运营效能，大幅提升生产力，强劲推动业务持续增长 。</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 mb-4">
                <div class="card h-100 animate__animated bg-transparent" data-animation="animate__fadeInUp">
                  <div class="card-body">
                    <div class="icon mb-3">
                      <i class="fas fa-cloud fa-3x text-dark"></i>
                    </div>
                    <h5 class="card-title">云解决方案</h5>
                    <p class="card-text">运用云服务优化数字基础设施，打破协作壁垒，实现无缝沟通；
                      具备灵活可扩展性，从容应对业务起伏；多重防护守护数据安全，全方位为您的业务保驾护航</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-6 mb-4">
                <div class="card h-100 animate__animated bg-transparent" data-animation="animate__fadeInUp">
                  <div class="card-body">
                    <div class="icon mb-3">
                      <i class="fas fa-network-wired fa-3x text-dark"></i>
                    </div>
                    <h5 class="card-title">IT 咨询</h5>
                    <p class="card-text">我们的专家顾问团队凭借深厚专业知识，
                      引导您精准采用最新技术，助您在瞬息万变的数字环境中抢占先机，
                      始终屹立行业前沿，实现稳健发展。</p>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 mb-4">
                <div class="card h-100 animate__animated bg-transparent" data-animation="animate__fadeInUp">
                  <div class="card-body">
                    <div class="icon mb-3">
                      <i class="fas fa-comments-dollar fa-3x text-dark"></i>
                    </div>
                    <h5 class="card-title">免费</h5>
                    <p class="card-text">我们郑重承诺，若您提供服务器与数据库，
                      我们将竭诚免费为您完成程序的安装与调试工作。
                      以精湛技术与高效流程，确保程序顺利上线，为您的业务开展筑牢基础 。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card shadow-sm border-0 animate__animated" data-animation="animate__zoomIn">
              <img :src="require('@/static/picture/why-us.jpg')" alt="why us img" class="card-img">
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="animate__animated bg-light hidden" data-animation="animate__fadeInUp">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
            <div class="col-lg-12">
              <div class="row">
                <div class="col-lg-6 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <i class="fa-regular fa-clock display-1 text-dark pb-4"></i>
                      <br>
                      <h1 id="yearsExperience">20+</h1>
                      <p>Years of experience</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <i class="fa-solid fa-shield text-dark display-1 pb-4"></i>
                      <br>
                      <h1 id="darkStories">390+</h1>
                      <p>dark Stories</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mt-4">
                <div class="col-lg-6 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <i class="fa-regular fa-thumbs-up display-1 text-dark pb-4"></i>
                      <br>
                      <h1 id="companiesTrust">6K+</h1>
                      <p>Companies Trust Us</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <i class="fa-solid fa-database text-dark display-1 pb-4"></i>
                      <br>
                      <h1 id="resultsGuaranteed">100%</h1>
                      <p>Results Guaranteed</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="card border-0">
              <img class="card-img" alt="experience img" :src="require('@/static/picture/experience.jpg')">
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "ChooseMe"
}
</script>


<style scoped>
.card-text{
  text-indent:  2em;
}
</style>